<template>
  <div id="torbar">
    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
      background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <div class="sss">
        <i class="el-icon-basketball" style="font-size: 2.5em;color:white;"></i>
        <h1 class="s666">校园篮球后台管理系统</h1>
      </div>
      <el-submenu index="1">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">校篮球队赛事管理</el-menu-item>
        <el-menu-item index="2-2">教职工赛事管理</el-menu-item>
        <el-menu-item index="2-3">校内篮球杯管理</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">每日训练计划</template>
          <el-menu-item index="2-4-1">周一~周三训练安排</el-menu-item>
          <el-menu-item index="2-4-2">田径场训练安排</el-menu-item>
          <el-menu-item index="2-4-3">球性训练安排</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <router-link to="/home/MessageCentering">消息中心</router-link>
      </el-menu-item>
      <el-menu-item index="3">
        <router-link to="/home/OrderManagement">订单管理</router-link>
      </el-menu-item>
      <el-menu-item index="4">
        <router-link to="/home/WinnerCenter">荣誉中心</router-link>
      </el-menu-item>
      <el-menu-item index="5">
        <router-link to="/LoginInterface">退出登录</router-link>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Banner',
  data() {
    return {
      activeIndex2: '1', // 默认选中的菜单项
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      this.$router.push({ name: 'LoginInterface' });
    }
  }
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}

#torBar {
  width: 100%;
  height: 100px;
  background-color: black;
  position: relative;
}

.el-menu-demo {
  width: 100%;
}

.el-menu--horizontal.el-menu-demo {
  display: flex;
  justify-content: flex-end;
}

.s666 {
  float: right;
  color: white;
  line-height: 1.5em;
  padding-left: 5px;
}

.sss {
  display: inline-block;
  position: absolute;
  left: 100px;
  top: 10px
}
</style>